<template>
  <el-pagination
    class="pagination"
    v-model:current-page="pagination.page"
    v-model:page-size="pagination.size"
    :page-sizes="[10, 50, 100, 200]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
const emits = defineEmits("reloadData");

const pagination = reactive({
  page: 1,
  size: 10,
  total: 20,
});
const handleCurrentChange = (val) => {
  pagination.page = val;
  emits("reloadData");
};
const handleSizeChange = (val) => {
  pagination.size = val;
  emits("reloadData");
};

defineExpose({
  page: pagination,
});
</script>

<style lang="scss" scoped></style>
